import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,  } from 'antd';
import { baseUrl } from '../../config/system';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
function ReportList ({ dispatch, reportList, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const columns = [{
        title: '报表名称',
        dataIndex: 'fileName',
        key: 'fileName',
        width: 150,
      },{
        title: '文件',
        dataIndex: 'filePath',
        key: 'filePath',
        width: 100,
        render: (text, record) => (
            <span>
             <a onClick={onUploadFile.bind(null, record.filePath,record.fileName)}>下载文件</a>
            </span>
        ),
      },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
      },{
        title: '操作',
        key: 'operation',
        width: 80,
        render: (text, record) => (
            <span>
               <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_,record.filePath)}>
                  <a>删除</a>
               </Popconfirm>
            </span>
        ),
    }
    ];

    const pagination = {
        current:reportList.current,
        pageSize:reportList.currentSize,
        total: reportList.total,
        showSizeChanger: true,
        showTotal: (total => '共' + reportList.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'reportList/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'reportList/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':reportList.currentSize} },
            });
        },
    };

    const submitHandle = () => {
        dispatch({
            type: 'reportList/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear(){
      form.resetFields();
    }

      //下载报表文件
    function onUploadFile (filePath,fileName) {
        let values = {filePath:filePath,fileName:fileName};
        let param = JSON.stringify(values);
        param = encodeURIComponent(param);
        window.open(baseUrl+"/report/downLoadFile?param="+param);
    }

    function deleteHandler(id,filePath) {
        dispatch({
            type: 'reportList/remove',
            payload: {id:id,filePath:filePath},
            search:{...getFieldsValue(),...{'pageNum':reportList.current, 'pageSize':reportList.currentSize}}
        });
    }

    return (
         <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >   
                   <FormItem>
                      {getFieldDecorator('fileName')(
                          <Input type="text" placeholder="报表名称" style={{ width:'200px' }} />
                      )}
                    </FormItem>                     
                   
                    <FormItem>
                        {getFieldDecorator('createTime')(
                                <RangePicker style={{ width:'300px' }}  format="YYYY-MM-DD" />
                        )}
                    </FormItem>

                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>                  
                </Form>
            </div>

            <div style={{width:'100%',padding:"30px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={reportList.list} pagination={pagination}
                scroll={{ y: document.body.clientHeight - 218 }}
                />
            </div>
            </div>
                        
        </div>
    );
}

function mapStateToProps(state) {
  return {  reportList: state.reportList,loading:state.loading.models.reportList};
}

ReportList = Form.create()(ReportList);
export default connect(mapStateToProps)(ReportList);
